<template>
<div>
	<div style="width:360px;" center>
		<p mgt6 text-center>
			<img src="../../images/logo.png" ht4>
		</p>
		<p mgt4 text-center sz4>找回密码</p>

		<div v-if="!isCaptchaValid">
			<Form ref="retrieve-password-form1" :rules="rules" :model="model" mgt5>
				<FormItem prop="phoneNumber">
					<Input v-model="model.phoneNumber" size="large" placeholder="已验证手机号"></Input>
				</FormItem>
				<FormItem prop="captcha">
					<Input v-model="model.captcha" type="password" size="large" placeholder="短信验证码">
						<Button slot="append" @click="handleGetPhoneCaptcha">获取验证码</Button>
					</Input>
				</FormItem>
			</Form>
			<p mgt3>
				<Button type="primary" size="large" @click="handleCheckCaptcha" long ht3 white>下一步</Button>
			</p>
		</div>

		<div v-else>
			<Form ref="retrieve-password-form2" :rules="rules" :model="model" mgt5>
				<FormItem prop="newPassword">
					<Input v-model="model.newPassword" :type="showPassword?'text':'password'" size="large" placeholder="新密码*">
						<Icon type="md-eye" slot="suffix" title="" @click="handleShowPassword" linkable :blue="showPassword" />
					</Input>
				</FormItem>
			</Form>
			<p mgt3>
				<Button type="primary" size="large" @click="handleResetPasswordByPhone" long ht3 white>提交</Button>
			</p>
		</div>

	</div>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'
import { passwordValidator } from '@common/lib/validates'

@Component
export default class RetrievePassword extends AbpBase{
	showPassword:Boolean = false;
	isCaptchaValid:Boolean = false;
	model = {
		phoneNumber: "",
		captcha: "",
		newPassword: ""
	}
	rules={
		phoneNumber: [
			{ required: true, message: '必须填写手机号', trigger: 'blur' }
		],
		captcha: [
			{ required: true, message: '必须填写验证码', trigger: 'blur' }
		],
		password: [
			{ required: true, validator: passwordValidator, trigger: 'blur' }
		]
	}
	async handleGetPhoneCaptcha() {
		var response = await this.post('Verification/CheckPhoneNumber', this.model);
		if(!response.result) {
			this.error("未验证的手机号");
			return;
		}
		response = await this.post('Verification/SendPhoneCaptcha', this.model);
		//if(response.success)
	}
	async handleCheckCaptcha() {
		var response = await this.post('Verification/CheckPhoneCaptcha', this.model);
		if(!response.result) {
			this.error("验证码验证失败");
			return;
		}
		this.isCaptchaValid = true;
	}
	async handleResetPasswordByPhone() {
		var response = await this.post('Verification/ResetPasswordByPhone', this.model);
		if(response.success) {
			this.$router.push({
				name: 'login'
			});
		}
	}
	handleShowPassword() {
		this.showPassword = !this.showPassword;
	}
}
</script>
